<template>
	<view class="content">
		<view class="content-info">
			<view class="con-info-1">
				<view class="view-1">水电余额</view>
				<view class="view-2">￥{{cardInfo.balance}}</view>
			</view>
			<view class="con-info-2"  @click="goTo(`/pages/personal/recharge/recharge?custId=${cardInfo.custId}&custType=${cardInfo.custType}`)">
				<view class="view-3">去充值</view>
				<uni-icons class="icon" type="forward" size="18" color="#6A6A6A"></uni-icons>
			</view>
		</view>
		<view  v-if="info.list&&info.list.length > 0" v-for="(item, index) in info.list" :key="index">
			<view  class="row-col" v-for="(m, n) in item.list">
				<view class="topBox">
					<view class="name">{{m.roomName}}</view>
					<view class="mess" v-if="m.deviceType == 'cold_watermeter'">冷水表</view>
					<view class="mess" v-if="m.deviceType == 'hot_watermeter'">热水表</view>
					<view class="mess">
						<view class="num fill">当前读数：<span class="color-red">{{m.currentReading}}</span></view>
					</view>
					<view class="time">更新时间：{{timestamp(m.Time,true)}}</view>
				</view>
				<view class="con-detail" @click="goDetail(m.deviceNo, m.roomName)">
					<view class="view">用水明细</view>
					<image :src="$imgUrl + '/personal/go-detail-icon.png'" class="con-photo" mode=""></image>
				</view>
			</view>
		</view>
		<view v-else>
			<u-empty mode="data" icon="https://www.mescroll.com/img/mescroll-empty.png"></u-empty>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { onShow } from "@dcloudio/uni-app"
	import { getWatermeters } from '@/common/API/ammeters'
	import dayjs from "dayjs"
	import { getFinanceAccount } from '@/common/API/bills'
	import { reactive,ref } from 'vue'
	
	//处理时间戳
	const timestamp = (val : any, s) => {
		return !s ? dayjs(val).format('YYYY-MM-DD') : dayjs(val).format('YYYY-MM-DD HH:mm:ss')
	}
	const cardInfo = ref({})
	const info = reactive({
		list: []
	})
	
	const goDetail = (no,name) => {
		uni.navigateTo({
			url: `/pages/personal/watermeters/watermetersDetail?no=${no}&name=${name}`
		})
	}
	
	const getList = async () => {
		let res = await getWatermeters()
		console.log(res)
		if(res){
			info.list = res
		}
	}
	
	onShow(()=>{
		getList()
		getBalanceInfo()
	})
	const goTo = (url:any)=>{
		uni.navigateTo({
			url: url
		})
	}
	// 获取卡包信息
	const getBalanceInfo = async ()=>{
		cardInfo.value = await getFinanceAccount({});
	}
</script>

<style lang="scss" scoped>
.content{
	padding: 16rpx 0 20rpx 0;
	.content-info{
		background: #fff;
		border-radius: 16rpx;
		margin: 32rpx;
		padding: 16rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.con-info-1{
			.view-1{
				font-size: 24rpx;
			}
			.view-2{
				font-size: 36rpx;
				font-weight: bold;
			}
		}
		.con-info-2{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			.view-3{
				margin-right: 16rpx;
			}
		}
	}
	.row-col{
		margin: 16rpx 32rpx 20rpx 32rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}
	.topBox{
		background: #fff;
		padding: 0 32rpx 20rpx;
		.name{
			padding: 34rpx 0 6rpx;
			font-size: 32rpx;
			font-weight: bold;
		}
		.title{
			font-size: 28rpx;
			color: rgba(17, 17, 17, 1);
			.icon{
				display: inline-block;
				vertical-align: middle;
				width: 36rpx;
				height: 36rpx;
				background: url('#{$imgUrl}/icon/waterMeter.png') no-repeat;
				background-size: 100%;
				margin: -8rpx 0 0 10rpx;
			}
		}
		.mess{
			.num{
				line-height: 48rpx;
			}
			.price{
				line-height: 48rpx;
			}
		}
		.time{
			line-height: 48rpx;
			
		}
	}
	.color-red{
		color: rgba(249, 55, 75, 1);
	}
	.con-detail{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 32rpx 38rpx 32rpx;
		background: #fff;
		position: relative;
		&::before{
			content: " ";
			position: absolute;
			left: 32rpx;
			top: 0;
			width: 626rpx;
			height: 2rpx;
			border-top: 2rpx solid rgba(234, 234, 233, 1);
		}
		.view{
			color: rgba(253, 150, 24, 1);
		}
		.con-photo{
			width: 34rpx;
			height: 34rpx;
		}
	}
}
</style>
